CSS - 选择器

发表于   |   分类于   |  

CSS 常用选择器有 6 种：

  • 标签选择器；
  • 类选择器；
  • id 选择器；
  • 全局选择器；
  • 群组选择器；
  • 后代选择器；

标签选择器

标签选择器通过 HTML 标签作为选择器：

1
2
3
4
p {
    color: red;
    font-size: 20px;
}

类选择器

类选择器通过 class 属性作为选择器：

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
  .red {
      color: red;
  }
  .font {
      font-size: 50px;
  }
</style>
<h1 class="red">类选择器</h1>
<h2 class="red font">类选择器</h2>

类选择器还可以通过 HTML 标签进行更细一步的区分：

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
  h1.font {
      font-size: 20px;
  }
  h2.font {
      font-size: 50px;
  }
</style>
<h1 class="red font">类选择器</h1>
<h2 class="red font">类选择器</h2>

可以自定义一个属性字段，使用类选择器：

1
2
3
4
5
6
<style type="text/css">
  [bc] {
      background: red;
  }
</style>
<h2 class="red font" bc="">类选择器</h2>

id 选择器

id 选择器通过 id 属性作为选择器：

1
2
3
4
5
6
<style type="text/css">
  #bc {
      background: #000000;
  }
</style>
<h1 id="bc">id选择器</h1>

与 class 属性不同，id 属性和 HTML 元素是一一对应的，没每个 HTML 元素只能有一个 id，一个 id 也只能声明一个元素。

群组选择器

给多个 HTML 标签，类，id 设置同样的样式：

1
2
3
4
5
6
7
8
9
<style type="text/css">
  #bc, .bc, h2, h3 {
      background: #000000;
  }
</style>
<h1 id="bc">id选择器</h1>
<p class="bc">类选择器</p>
<h1>HTML 标签</h1>

​

全局选择器

全局选择器又称为通配符选择器，如下：

1
2
3
* {
    background: #ffffff;
}

后代选择器

后代选择器利用 HTML 标签的层级关系，通过 HTML 标签作为选择器：

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
    p em {
        font-size: 30px;
    }
    #p1 em {
        font-size: 30px;
    }
    p.red a em {
        font-size: 30px;
    }
</style>

伪类选择器

有些状态使用 class 和 id 属性无法准确的表示，因此需要使用伪类。CSS 伪类用于向某些选择器添加特殊的效果。伪类最常见的是对于链接的状态处理，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
    a:link {/* 未访问的链接 */
        color: #FF0000
    }
    a:visited {/* 已访问的链接 */
        color: #00FF00
    }
    a:hover {/* 鼠标移动到链接上 */
        color: #FF00FF
    }
    a:active {/* 选定的链接 */
        color: #0000FF
    }
</style>

链接伪类有顺序的限制，其先后顺序为：

1
:link > :visited > :hover > :active

:hover 和 :active

:hover 用于鼠标经过某个元素时，:active 用于一个元素被激活时，也就是按下鼠标到松开鼠标的这段时间。例如：

1
2
3
4
5
6
7
8
9
<style type="text/css">
    p:active {
        color: red;
    }
    P:hover {
        font-size: 30px;
    }
</style>
<p>hello html</p>

伪类可以通过类选择器和标签选择器组合使用：

1
2
3
4
5
6
7
8
9
<style type="text/css">
    p.tips:active {
        color: red;
    }
    p.tips:hover {
        font-size: 30px;
    }
</style>
<p class="tips">hello html</p>